<template>
    <div class="message-box" v-if="show">
        <strong><slot name="title"></slot></strong>
        <slot></slot>
        <span class="message-box-close" @click="$emit('update-show', false)">X</span>
    </div>
</template>

<script>
    export default {
        props: ['show'],
        mounted () {
            this.$bus.$on('message-close', () => {
                this.$emit('update-show', false)
            });
        },
    }
</script>

<style scoped>
    .message-box{
        padding: 10px 20px;
        background: #4fc08d;
        border: 1px solid #42b983;
    }
    .message-box-close {
        float: right;
        cursor: pointer;
    }
</style>